<template>
  <div class="header_toolbars">
    <div>
      <el-icon
        class="closeMenu left"
        color="#32c5ff"
        @click="$emit('updateNarBar')"
        ><Fold
      /></el-icon>
      <span class="welcome left">欢迎进入系统</span>
    </div>
    <el-button type="info" @click="logout">退出</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    logout() {
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="scss" scoped>
.welcome {
  display: inline-block;
  color: #32c5ff;
  font-size: 18px;
}
.left {
  text-align: left;
}
.right {
  text-align: right;
}
.header_toolbars {
//   background-color: #30363d;
  // 给头部设置一下弹性布局
  display: flex;
  // 让它贴标左右对齐
  justify-content: space-between;
  // 清空图片左侧padding
  padding-left: 0;
  // 按钮居中
  align-items: center;
  // 文本颜色
  color: #fff;
  // 设置文本字体大小
  font-size: 20px;
  border-bottom:1px solid #e6e6e6 ;
  // 嵌套
  > div {
    // 弹性布局
    display: flex;
    // 纵向上居中对齐
    align-items: center;
    // 给文本和图片添加间距，使用类选择器
    span {
      margin-left: 15px;
    }
  }
  line-height: 60px;
  height: 60px;
}
.toolbar_left {
  text-align: left;
}
.toolbar_right {
  text-align: right;
}
.setting:hover {
  background-color: rgb(246, 246, 246);
  cursor: pointer;
}
.tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.closeMenu {
  cursor: pointer;
  margin-right: 10px;
  height: 60px;
  width: 50px;
}
.closeMenu:hover {
  background-color: rgb(242, 242, 242);
}
</style>
